<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->

    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <!--表依赖文件-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
</head>

<body>
    
    <!--修改-->
    <table id="plan_table" class="bk-table table-bordered">
        <thead>
        <tr>
            <th>计划名称</th>
            <th>计划类型</th>
            <th>计划星级</th>
            <th>开始时间</th>
            <th>结束时间</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>跑步</td>
                <td>日计划</td>
                <td>
                    一星计划
                </td>
                <td>2020-12-22 6：45</td>
                <td>2020-12-22 6：45</td>
            </tr>
            <tr>
                <td>复习计组</td>
                <td>周计划</td>
                <td>
                    三星计划
                </td>
                <td>2020-12-22 9：00</td>
                <td>2020-12-22 11：30</td>
            </tr>
            <tr>
                <td>整理宿舍</td>
                <td>单次计划</td>
                <td>
                    一星计划
                </td>
                <td>2020-12-23 14：00</td>
                <td>2020-12-23 16：00</td>
            </tr>
            <tr>
                <td>年末总结</td>
                <td>单次计划</td>
                <td>
                    四星计划
                </td>
                <td>2020-12-30 21：00</td>
                <td>2020-12-30 22：00</td>
            </tr>
        </tbody>
    </table>
    <!--js-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.config.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/lang/zh-cn/zh-cn.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkSwitcher-1.0/js/bkSwitcher.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>
    <script>
        var planTable = $('#plan').DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分页
            ordering: false, //关闭排序
            info: true, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 10, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            language: language, //汉化
            serverSide: true,
            lengthMenu: [5, 10, 25, 50, 75, 100],
            ajax: {
                url: '{{SITE_URL}}get_plan_list/',
                method: "post",
                dataType: 'json',
                data: function (d) {
                    d.search_plan_name = $('#search_plan_name').val();
                    d.search_plan_grade = $('#search_plan_grade').val();
                    d.search_apply_time = $('#search_apply_time').val();
                    d.search_plan_type = $('#search_plan_type').val();
                    d.search_plan_details = $('#search_plan_details').val();
                    d.csrfmiddlewaretoken = "{{ csrf_token }}";
                },
                dataSrc: function (json) {
                    json.draw = json.data.info.draw;
                    json.recordsTotal = json.data.info.recordsTotal;
                    json.recordsFiltered = json.data.info.recordsFiltered;
                    json.data = json.data.info.data

                    return json.data;
                },
            },
            columnDefs: [
                {
                    targets: 0,
                    data: "plan_name",
                },
                {
                    targets: 1,
                    data: "plan_grade",
                },
                {
                    targets: 2,
                    data: "plan_type",
                },
                {
                    targets: 3,
                    data: "plan_start",
                },
                {
                    targets: 4,
                    data: "plan_end",
                },
                
                {
                    targets: 5,
                    data: "id",
                    render: function (data, type, row, meta) {
                        return '                     <a class="bk-icon-button bk-success bk-button-mini" onclick="displayPlan(' + data + ')" data-toggle="modal" data-target="#displayModal">\n' +
                            '                                <i class="bk-icon icon-search bk-icon"></i>\n' +
                            '                                <i class="bk-text">查看</i>\n' +
                            '                            </a>\n' +
                            '                            <a class="bk-icon-button bk-warning bk-button-mini" onclick="editPalnForm(' + data + ')" title="编辑">\n' +
                            '                                <i class="bk-icon icon-file bk-icon"></i>\n' +
                            '                                <i class="bk-text">编辑</i>\n' +
                            '                            </a>\n' +
                            '                            <a class="bk-icon-button bk-danger bk-button-mini" title="关闭" onclick="deletePlan(' + data + ')">\n' +
                            '                                <i class="bk-icon icon-close bk-icon"></i>\n' +
                            '                                <i class="bk-text">删除</i>\n' +
                            '                            </a>';
                    }
                },
            ]
        });

        function search() {
            planTable.ajax.reload(null, false);
        }

        function resetSearch() {
            $('#search_plan_name').val("");
            $('#search_apply_time').val("");
            planTable.ajax.reload(null, false);
        }


       /* $("#plugin3_demo3 .select2_box").select2({
            ajax: {
                url: "{{ SITE_URL }}get_org_select_data",
                cache: false,
                //对返回的数据进行处理
                results: function (data) {
                    return data.data;
                }
            }

        }); */

        $('#validate_form').validate({
            ignore: '.ignore',
            errorElement: 'div', //错误信息的容器
            errorClass: 'is-danger',
            errorPlacement: function (error, element) {
                error.addClass('bk-form-tip').insertAfter(element)
            },
            validClass: "bk-valid",
            //验证规则
            rules: {
                plan_name: {
                    required: true,
                },
                plan_grade: {
                    required: true,
                },
                plan_type: {
                    required: true,
                },
                plan_details: {
                    required: true,
                }
            },
            //错误提示信息
            messages: {
                plan_name: "<p class='bk-tip-text'>计划名称为必填项！</p>  ",
                plan_grade: "<p class='bk-tip-text'>请选择计划星级！</p>  ",
                plan_type: "<p class='bk-tip-text'>计划类型为必填项！</p>  "
            }
        });

        function savePlan() {
            let plan_start = $('#plan_start').val() 
            let end_datetime = $('#plan_end').val() 
            if (!editor.getContent()) {
                new bkMessage({
                    message: "请输入详细信息",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            if (!$('#plan_type').val()) {
                new bkMessage({
                    message: "请选择计划星级",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            if (plan_start >= plan_end) {
                new bkMessage({
                    message: "结束日期不能小于起始日期",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            
            if ($('#validate_form').valid()) {
                $.ajax({
                    url: '{{ SITE_URL }}save_plan_info/',
                    method: 'post',
                    data: {
                        'plan_name': $("#plan_name").val(),
                        'requirement': editor.getContent(),
                        'plan_grade': $('#plan_grade').val(),
                        'plan_type' : $('#plan_type').val(),
                        'plan_details': $('#plan_details').val()
                        'plan_start': plan_start,
                        'plan_end': plan_end,
                        'plan_id': $('#plan_id').val(),
                        'csrfmiddlewaretoken': "{{ csrf_token }}"-->
                    },
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            $('#myModal').modal('hide')
                            planTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                            $('#myModal').modal('hide')
                            planTable.ajax.reload(null, false)
                        }
                    }
                })
            }
        }

        $('#myModal').on('hide.bs.modal', function () {
            document.getElementById("validate_form").reset();
            $("#validate_form").validate().resetForm();
            $("#plan_name").val("");
            editor.setContent("");
            $('#plan_grade').val(1);
            $("#plugin3_demo3 .select2_box").select2("val", "")
            $('#plan_start').val("")
            $('#plan_end').val("")
            var active = true;
            $('#plan_id').val();
        });

        function editPalnForm(id) {
            $.ajax({
                url: '{{ SITE_URL }}get_plan_info/' + id,
                method: 'get',
                success: function (response) {
                    if (response['result']) {
                        $("#myModalLabel").text("修改计划信息");
                        $('#myModal').modal('show');
                        $("#plan_id").val(response.data.info.data.id);
                        $("#plan_name").val(response.data.info.data.plan_name);
                        editor.setContent(response.data.info.data.requirement)
                        $('#plan_type').val(response.data.info.data.plan_type);
                        $('#PLAN_LEVEL_LIST').val(response.data.info.data.PLAN_LEVEL_LIST);
                        $('#plan_user').val(response.data.info.data.plan_user);
                        $('#plan_grade').val(response.data.info.data.plan_grade);
                        $('#plan_details').val(response.data.info.data.plan_details);
                        $('#plan_start').val(response.data.info.data.plan_start);
                        $('#plan_end').val(response.data.info.data.plan_end);
                        $('#plan_id').val(response.data.info.data.id);

                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                    }
                }
            })
        }

        function displayPlan(id) {
            $.ajax({
                url: '{{ SITE_URL }}get_plan_info_by_id/' + id,
                method: 'get',
                success: function (response) {
                    if (response['result']) {
                        $("#display_plan_id").html(response.data.info.data.id);
                        $("#display_plan_name").html(response.data.info.data.plan_name);
                        $('#display_plan_type').html(response.data.info.data.plan_type);
                        $('#display_PLAN_LEVEL_LIST').html(response.data.info.data.PLAN_LEVEL_LIST);
                        $('#display_plan_user').html(response.data.info.data.plan_user);
                        $('#display_plan_grade').html(response.data.info.data.plan_grade);
                        $('#display_plan_details').html(response.data.info.data.plan_details);
                        $('#display_plan_start').html(response.data.info.data.plan_start);
                        $('#display_plan_end').html(response.data.info.data.plan_end);
                        $('#display_plan_id').html(response.data.info.data.id);
                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                    }
                }
            })
        }

        function deletePlan(id) {
            var dialog = new bkDialog({
                type: 'dialog',
                title: '删除',
                content: '确认删除该条数据？',
                confirmFn: function () {
                    $.ajax({
                        url: '{{ SITE_URL }}delete_plan_info/' + id,
                        method: 'get',
                        success: function (response) {
                            if (response['result']) {
                                new bkMessage({
                                    message: response['message'],
                                    theme: 'success'
                                })
                                planTable.ajax.reload(null, false)
                            } else {
                                // 失败处理
                                new bkMessage({
                                    message: response['message'],
                                    theme: 'error',
                                    delay: 3000
                                });
                            }
                        }
                    })
                }
            });
            dialog.show();
        }
    </script>
</body>

</html>